<template>
  <div class="tank-list-container">
    <template v-for="item in tankData">
      <div class="tank-container">
        <div
          :key="item.id"
          class="can-container"
          :class="{
            'old-1': item.isOld && item.typeId === 1,
            'old-2': item.isOld && item.typeId === 2,
            'old-3': item.isOld && item.typeId !== 1 && item.typeId !== 2,
            'new-1': !item.isOld && item.typeId === 1,
            'new-2': !item.isOld && item.typeId === 2,
            'new-3': !item.isOld && item.typeId !== 1 && item.typeId !== 2,
          }"
        >

          <div class="tank-height">
            <div class="tank-height-ratio" :style="{'height': item.height / item.safeHeight * 100 + '%'}"></div>
          </div>
          <div class="tank-tip">
            <span class="logo-box"><img src="../../../assets/data-screen/logo-little.png" alt=""></span>
            <span>状态: {{ filterStatus(item.status) }}</span>
            <span>油高: {{ item.height }}米</span>
            <span>重量: {{ item.weight }}吨</span>
          </div>
          <!-- <div class="tank-weight">{{ item.weight }}吨</div> -->
        </div>
        <div class="tank-name">{{ item.name }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "tankComponent",
  props: {
    tankData: {
      type: Array,
      default: () => [],
    },
  },
  data(){
    return {
      statusOptions:[
        {
          value:'1',
          label:'发油'
        },
        {
          value:'2',
          label:'收油'
        },
        {
          value:'3',
          label:'沉降'
        },
        {
          value:'4',
          label:'停用'
        },
        {
          value:'5',
          label:'正常'
        },
      ],
    }
  },

  methods: {
    filterStatus(value){
      return this.statusOptions.find(item=>item.value == value)?.label || '--'
    }
  },
};
</script>

<style lang="scss" scoped>
.tank-list-container {
  display: flex;
  margin-bottom: calc(20 / 1920 * 100vw);
}
.tank-container {
  width: calc(160 / 1920 * 100vw);
  height: calc(160 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: calc(60 / 1920 * 100vw);
}
.can-container {
  background-size: 100% 100%;
  position: relative;
  &.old-1 {
    width: calc(97 / 1920 * 100vw * 1.2);
    height: calc(100 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/old-can-1.png");
  }
  &.old-2 {
    width: calc(97 / 1920 * 100vw * 1.2);
    height: calc(104 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/old-can-2.png");
  }
  &.old-3 {
    width: calc(100 / 1920 * 100vw * 1.2);
    height: calc(75 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/old-can-3.png");
    margin-top: calc(30 / 1920 * 100vw);
  }
  &.new-1 {
    width: calc(97 / 1920 * 100vw * 1.2);
    height: calc(100 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/new-can-1.png");
  }
  &.new-2 {
    width: calc(97 / 1920 * 100vw * 1.2);
    height: calc(104 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/new-can-2.png");
  }
  &.new-3 {
    width: calc(100 / 1920 * 100vw * 1.2);
    height: calc(75 / 1920 * 100vw * 1.2);
    background-image: url("./../../../assets/data-screen/new-can-3.png");
    margin-top: calc(30 / 1920 * 100vw);
  }
}
.tank-name {
  font-size: calc(14 / 1920 * 100vw);
  color: #fff;
  text-align: center;
}
.tank-height {
  width: calc(8 / 1920 * 100vw);
  // height: calc(60 / 1920 * 100vw);
  background-color: #698eb7;
  border-radius: calc(4 / 1920 * 100vw);
  position: absolute;
  top: 20%;
  left: 8%;
  bottom:20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.tank-height-ratio {
  width: calc(6 / 1920 * 100vw);
  border-radius: calc(4 / 1920 * 100vw);
  height: 100%;
}
.tank-tip {
  font-size: calc(12 / 1920 * 100vw);
  position: absolute;
  top: 20%;
  left: 20%;
  right: 5%;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size:calc(10 / 1920 * 100vw);

  &>span{
    line-height:calc(14 / 1920 * 100vw);
    font-weight: 600;
    &:nth-child(4){
      color:#10102f
    }
    &.logo-box{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: calc(6 / 1920 * 100vw);
      &>img{
        width: calc(43 / 1920 * 100vw * 1.2);
        margin-bottom: calc(4 / 1920 * 100vw);
      }
    }
  }
}
.new-1,
.new-2,
.new-3 {
  .tank-height-ratio {
    background-color: #00e3e8;
  }
  .tank-tip {
    &>span{
      &:first-child{
        color:#00c3c7
      }
      &:nth-child(2){
        color:#008285
      }
    }
  }
}
.old-1,
.old-2,
.old-3 {
  .tank-height-ratio {
    background-color: #e6ce03;
  }
  .tank-tip {
    &>span{
      &:first-child{
        color:#e49600
      }
      &:nth-child(2){
        color:#9d5500
      }
    }
  }
}

.tank-weight {
  color: #10102f;
  background-color: #819ec0;
  border-radius: calc(9 / 1920 * 100vw);
  width: calc(60 / 1920 * 100vw);
  height: calc(18 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(12 / 1920 * 100vw);
  position: absolute;
  right:5%;
  bottom: 20%;
}
.new-3,
.old-3 {
  .tank-tip{
    top:18%;
    bottom:15%;
    &>span{
      line-height: calc(14 / 1920 * 100vw)
    };
  }
}
</style>
